import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'

export class GoogleNewsPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleNewsPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleNewsPage {
    if (!GoogleNewsPage.instance) {
      GoogleNewsPage.instance = new GoogleNewsPage()
    }
    return GoogleNewsPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  getMainStyles(): string {
    return `
  /* 隐藏样式 */
  #main #cnt:has(${generateHideSelector(`div[role='navigation'][jscontroller]`)}) {
    #rcnt {
      padding-top: 40px !important;
    }
  }

  /* 主样式 */  
  #main {
    #rcnt {
      padding-top: ${this.themeVarService.search.resultItem.gap} !important;
      padding-bottom: ${this.themeVarService.search.resultItem.gap} !important;
      
      > div {
        display: block !important;
        margin: 0 !important;
      }
      
      #search {
        /* 搜索结果列表 */
        #rso > div > div {
          ${this.searchCommonStyles.resultContainerStyles({ fullWidth: false })}
          justify-content: unset !important;
          
          /* 结果项 */
          > div {
            ${this.searchCommonStyles.resultItemStyles({ overflowHide: false, noMarginBottom: true })}
            width: ${AppStyleCollections.Search.value.ITEM_WIDTH}  !important;
            
            a {
              &:hover {
                div[role=heading] {
                  color: var(${this.themeVarService.link.default.textHover}) !important;
                  text-decoration: none !important;
                }
              }
              
              /* 名称 */
              span:not([data-ts]) {
                color: var(${this.themeVarService.search.default.text}) !important;
              }

              /* 标题 */
              div[role=heading] {
                color: var(${this.themeVarService.link.default.text}) !important;
                
                &:hover {
                  color: var(${this.themeVarService.link.default.textHover}) !important;
                  text-decoration: none !important;
                }
                
                /* 描述 */
                & + div {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }
            }
          }
        } 
      }
    }
  }  
    `
  }
}
